<template>
  <!-- 地区任务分发弹窗 -->
  <el-dialog
    title="小项目管理规则"
    width="640px"
    :visible.sync="showTask"
    :close-on-click-modal="false"
    @close="handleClose"
    :modal-append-to-body="false"
  >
    <div class="diaTop">
      <p class="tips">该项目符合以下规则，按监察要求使用小项目管理方案：</p>
      <el-row>
        <el-col :span="6">区域</el-col>
        <el-col :span="6">行业</el-col>
        <el-col :span="6">工程造价</el-col>
        <el-col :span="6">建设周期</el-col>
        <!-- </el-row>
        <el-row> -->
        <el-col :span="6">{{ projectInfo.areaName || '--' }}</el-col>
        <el-col :span="6">{{ projectInfo.industryName || '--' }}</el-col>
        <el-col :span="6">&lt;{{ projectInfo.total || 0 }} 元</el-col>
        <el-col :span="6">&lt;{{ projectInfo.cycle || 0 }} 天</el-col>
      </el-row>
    </div>
    <div class="diaBot">
      <el-row>
        <el-col :span="12">
          <div class="infoBox">
            <div>
              <i class="icon iconfont icongongrenmingce"></i>
              <span>工人名册</span>
            </div>
            <p v-if="projectInfo.isRegister">
              项目开工后录入参建单位、班组以及务工人员、八大员等人员信息至系统备案
            </p>
            <p v-else>
              项目开工后使用上传附件的方式，备案工人信息，等同于落实实名制制度
            </p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="infoBox">
            <div>
              <i class="icon iconfont icongongrenkaoqin"></i>
              <span>工人考勤</span>
            </div>
            <p v-if="projectInfo.isAtt">项目开工后使用实名制考勤设备打卡</p>
            <p v-else>项目开工后上传工人考勤记录的附件，备案工人考勤</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="infoBox">
            <div>
              <i class="icon iconfont icongongzidaifa1"></i>
              <span>工资代发</span>
            </div>
            <p v-if="projectInfo.isSalary">
              使用银行代发功能发放工资，需开设工资专户，缴纳保证金
            </p>
            <p v-else>
              使用附件备案工资发放记录，无需开设工资专户，无需缴纳保证金
            </p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="infoBox">
            <div>
              <i class="icon iconfont icongongshangbaoxian1"></i>
              <span>工伤保险</span>
            </div>
            <p v-if="projectInfo.isIns">
              购买工伤保险后，录入工伤保险购保信息并及时备案
            </p>
            <p v-else>无需录入工伤保险购保信息</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      showTask: false,
    }
  },
  props: {
    showTaskProp: {
      type: Boolean,
      default: false,
    },
    projectInfo: {
      type: Object,
      default: function () {
        return {
          areaName: '武汉',
          industryName: '住建',
          total: 0,
          cycle: 0,
          isRegister: 1,
          isAtt: 1,
          isSalary: 1,
          isIns: 1,
        }
      },
    },
  },
  watch: {
    showTaskProp(val) {
      this.showTask = val
      if (val) {
      }
    },
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
  },
}
</script>
<style lang="less" scoped>
.el-dialog__body {
  padding: 0 !important;
}
.diaTop {
  padding: 20px;
  .tips {
    line-height: 18px;
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    margin-bottom: 12px;
  }
  .el-row {
    border-top: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    .el-col {
      border-right: 1px solid #dbdbdb;
      border-bottom: 1px solid #dbdbdb;
      line-height: 40px;
      text-align: center;
      color: #333333;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
.diaBot {
  position: relative;
  padding: 15px;
  &::after {
    position: absolute;
    right: 0px;
    top: 0;
    left: 0px;
    height: 1px;
    content: '';
    width: 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e3e7e9;
    z-index: 10;
  }
  .el-col {
    padding: 5px;
    .infoBox {
      background: rgba(216, 216, 255, 0.2);
      height: 110px;
      padding: 20px;
      div {
        line-height: 24px;
        height: 24px;
      }
      .iconfont {
        font-size: 24px;
        color: #265faa;
      }
      span {
        font-size: 18px;
        font-weight: 600;
        color: #000;
        padding-left: 10px;
      }
      p {
        line-height: 20px;
        margin-top: 10px;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.theme_cold .diaBot .infoBox .iconfont {
  color: #009588;
}
</style>
